<template>
  <div class="statistics-overview-container">
    <!-- 时间选择器 -->
    <el-card class="time-selector-card">
      <el-form :model="timeForm" :inline="true">
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="timeForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 300px"
            @change="handleTimeChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button @click="setTimeRange('today')" :type="timeForm.activeRange === 'today' ? 'primary' : ''">
              今日
            </el-button>
            <el-button @click="setTimeRange('week')" :type="timeForm.activeRange === 'week' ? 'primary' : ''">
              本周
            </el-button>
            <el-button @click="setTimeRange('month')" :type="timeForm.activeRange === 'month' ? 'primary' : ''">
              本月
            </el-button>
            <el-button @click="setTimeRange('year')" :type="timeForm.activeRange === 'year' ? 'primary' : ''">
              本年
            </el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 核心指标卡片 -->
    <el-row :gutter="20" class="metrics-row">
      <el-col :span="24">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="metric-card">
              <div class="metric-content">
                <div class="metric-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
                  <el-icon><User /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-number">{{ metrics.totalUsers }}</div>
                  <div class="metric-label">总用户数</div>
                    <div class="metric-change" :class="{ positive: metrics.userGrowth > 0, negative: metrics.userGrowth < 0 }">
                    <el-icon v-if="metrics.userGrowth > 0"><ArrowUp /></el-icon>
                    <el-icon v-else-if="metrics.userGrowth < 0"><ArrowDown /></el-icon>
                    {{ Math.abs(metrics.userGrowth) }}%
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="metric-card">
              <div class="metric-content">
                <div class="metric-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
                  <el-icon><Document /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-number">{{ metrics.totalContent }}</div>
                  <div class="metric-label">总内容数</div>
                  <div class="metric-change" :class="{ positive: metrics.contentGrowth > 0, negative: metrics.contentGrowth < 0 }">
                    <el-icon v-if="metrics.contentGrowth > 0"><ArrowUp /></el-icon>
                    <el-icon v-else-if="metrics.contentGrowth < 0"><ArrowDown /></el-icon>
                    {{ Math.abs(metrics.contentGrowth) }}%
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="metric-card">
              <div class="metric-content">
                <div class="metric-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
                  <el-icon><View /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-number">{{ metrics.totalViews }}</div>
                  <div class="metric-label">总浏览量</div>
                  <div class="metric-change" :class="{ positive: metrics.viewGrowth > 0, negative: metrics.viewGrowth < 0 }">
                    <el-icon v-if="metrics.viewGrowth > 0"><ArrowUp /></el-icon>
                    <el-icon v-else-if="metrics.viewGrowth < 0"><ArrowDown /></el-icon>
                    {{ Math.abs(metrics.viewGrowth) }}%
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="metric-card">
              <div class="metric-content">
                <div class="metric-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)">
                  <el-icon><Money /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-number">¥{{ metrics.totalRevenue }}</div>
                  <div class="metric-label">总收入</div>
                  <div class="metric-change" :class="{ positive: metrics.revenueGrowth > 0, negative: metrics.revenueGrowth < 0 }">
                    <el-icon v-if="metrics.revenueGrowth > 0"><ArrowUp /></el-icon>
                    <el-icon v-else-if="metrics.revenueGrowth < 0"><ArrowDown /></el-icon>
                    {{ Math.abs(metrics.revenueGrowth) }}%
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <!-- 用户增长趋势 -->
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>用户增长趋势</span>
          </template>
          <div ref="userTrendChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-row">
      <!-- 内容浏览量趋势 -->
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>内容浏览量趋势</span>
          </template>
          <div ref="viewTrendChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-row">
      <!-- 收入趋势 -->
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>收入趋势</span>
          </template>
          <div ref="revenueTrendChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-row">
      <!-- 内容类型分布 -->
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>内容类型分布</span>
          </template>
          <div ref="contentTypeChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门内容排行 -->
    <el-row :gutter="20" class="ranking-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>热门内容排行</span>
          </template>
          <div class="ranking-list">
            <div
              v-for="(item, index) in hotContent"
              :key="item.id"
              class="ranking-item"
            >
              <div class="ranking-number" :class="getRankingClass(index)">
                {{ index + 1 }}
              </div>
              <div class="ranking-info">
                <div class="ranking-title">{{ item.title }}</div>
                <div class="ranking-meta">
                  <span>浏览量: {{ item.views }}</span>
                  <span>点赞: {{ item.likes }}</span>
                </div>
              </div>
              <div class="ranking-type">
                <el-tag :type="item.type === 'article' ? 'primary' : 'success'">
                  {{ item.type === 'article' ? '文章' : '视频' }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 活跃用户排行 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>活跃用户排行</span>
          </template>
          <div class="ranking-list">
            <div
              v-for="(item, index) in activeUsers"
              :key="item.id"
              class="ranking-item"
            >
              <div class="ranking-number" :class="getRankingClass(index)">
                {{ index + 1 }}
              </div>
              <div class="ranking-info">
                <div class="ranking-title">{{ item.username }}</div>
                <div class="ranking-meta">
                  <span>学习时长: {{ item.studyTime }}h</span>
                  <span>完成课程: {{ item.completedCourses }}</span>
                </div>
              </div>
              <div class="ranking-type">
                <el-tag :type="item.memberType === 'vip' ? 'warning' : 'info'">
                  {{ item.memberType === 'vip' ? 'VIP' : '普通' }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { User, Document, View, Money, ArrowUp, ArrowDown } from '@element-plus/icons-vue'

// 响应式数据
const userTrendChart = ref(null)
const viewTrendChart = ref(null)
const revenueTrendChart = ref(null)
const contentTypeChart = ref(null)

// 时间表单
const timeForm = reactive({
  dateRange: [],
  activeRange: 'month'
})

// 核心指标
const metrics = reactive({
  totalUsers: '12,580',
  userGrowth: 15.6,
  totalContent: '3,240',
  contentGrowth: 8.2,
  totalViews: '156,890',
  viewGrowth: 23.4,
  totalRevenue: '89,560',
  revenueGrowth: 12.8
})

// 热门内容
const hotContent = ref([
  {
    id: 1,
    title: '深度学习入门指南：从零开始的AI之旅',
    views: 15680,
    likes: 1234,
    type: 'article'
  },
  {
    id: 2,
    title: 'Vue3 + TypeScript 实战项目开发',
    views: 12450,
    likes: 987,
    type: 'video'
  },
  {
    id: 3,
    title: '高效时间管理的7个黄金法则',
    views: 11230,
    likes: 856,
    type: 'article'
  },
  {
    id: 4,
    title: 'Python数据分析实战案例',
    views: 9870,
    likes: 743,
    type: 'video'
  },
  {
    id: 5,
    title: '个人品牌建设完整指南',
    views: 8650,
    likes: 621,
    type: 'article'
  }
])

// 活跃用户
const activeUsers = ref([
  {
    id: 1,
    username: '学习达人小王',
    studyTime: 156,
    completedCourses: 23,
    memberType: 'vip'
  },
  {
    id: 2,
    username: '编程小能手',
    studyTime: 142,
    completedCourses: 19,
    memberType: 'vip'
  },
  {
    id: 3,
    username: '知识探索者',
    studyTime: 128,
    completedCourses: 17,
    memberType: 'normal'
  },
  {
    id: 4,
    username: '成长路上的人',
    studyTime: 115,
    completedCourses: 15,
    memberType: 'vip'
  },
  {
    id: 5,
    username: '终身学习者',
    studyTime: 98,
    completedCourses: 12,
    memberType: 'normal'
  }
])

// 生命周期
onMounted(() => {
  setTimeRange('month')
  nextTick(() => {
    initCharts()
  })
})

// 设置时间范围
const setTimeRange = (range) => {
  const now = new Date()
  let startDate, endDate = new Date()
  
  switch (range) {
    case 'today':
      startDate = new Date()
      break
    case 'week':
      startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
      break
    case 'month':
      startDate = new Date(now.getFullYear(), now.getMonth(), 1)
      break
    case 'year':
      startDate = new Date(now.getFullYear(), 0, 1)
      break
  }
  
  timeForm.dateRange = [startDate, endDate]
  timeForm.activeRange = range
  loadData()
}

// 时间变化处理
const handleTimeChange = () => {
  timeForm.activeRange = ''
  loadData()
}

// 加载数据
const loadData = () => {
  // 模拟数据加载
  console.log('加载数据:', timeForm.dateRange)
  // 这里应该根据时间范围重新加载数据和更新图表
}

// 初始化图表
const initCharts = () => {
  // 注意：这里使用模拟的图表初始化
  // 在实际项目中，你需要安装并使用 ECharts 或其他图表库
  
  // 用户增长趋势图
  if (userTrendChart.value) {
    userTrendChart.value.innerHTML = `
      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #909399;">
        <div style="text-align: center;">
          <div style="font-size: 48px; margin-bottom: 10px;">📈</div>
          <div>用户增长趋势图</div>
          <div style="font-size: 12px; margin-top: 5px;">请集成 ECharts 显示实际图表</div>
        </div>
      </div>
    `
  }
  
  // 浏览量趋势图
  if (viewTrendChart.value) {
    viewTrendChart.value.innerHTML = `
      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #909399;">
        <div style="text-align: center;">
          <div style="font-size: 48px; margin-bottom: 10px;">👁️</div>
          <div>浏览量趋势图</div>
          <div style="font-size: 12px; margin-top: 5px;">请集成 ECharts 显示实际图表</div>
        </div>
      </div>
    `
  }
  
  // 收入趋势图
  if (revenueTrendChart.value) {
    revenueTrendChart.value.innerHTML = `
      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #909399;">
        <div style="text-align: center;">
          <div style="font-size: 48px; margin-bottom: 10px;">💰</div>
          <div>收入趋势图</div>
          <div style="font-size: 12px; margin-top: 5px;">请集成 ECharts 显示实际图表</div>
        </div>
      </div>
    `
  }
  
  // 内容类型分布图
  if (contentTypeChart.value) {
    contentTypeChart.value.innerHTML = `
      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #909399;">
        <div style="text-align: center;">
          <div style="font-size: 48px; margin-bottom: 10px;">🥧</div>
          <div>内容类型分布图</div>
          <div style="font-size: 12px; margin-top: 5px;">请集成 ECharts 显示实际图表</div>
        </div>
      </div>
    `
  }
}

// 获取排行榜样式类
const getRankingClass = (index) => {
  if (index === 0) return 'first'
  if (index === 1) return 'second'
  if (index === 2) return 'third'
  return 'other'
}
</script>

<style scoped>
.statistics-overview-container {
  padding: 20px;
}

.time-selector-card,
.metrics-row,
.charts-row,
.ranking-row {
  margin-bottom: 20px;
}

.metric-card {
  cursor: pointer;
  transition: all 0.3s;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.metric-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.metric-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  margin-right: 20px;
}

.metric-info {
  flex: 1;
}

.metric-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.metric-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.metric-change {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.metric-change.positive {
  color: #67c23a;
}

.metric-change.negative {
  color: #f56c6c;
}

.ranking-list {
  max-height: 400px;
  overflow-y: auto;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  margin-right: 15px;
}

.ranking-number.first {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #fff;
}

.ranking-number.second {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #fff;
}

.ranking-number.third {
  background: linear-gradient(135deg, #cd7f32, #daa520);
  color: #fff;
}

.ranking-number.other {
  background: #f5f7fa;
  color: #909399;
}

.ranking-info {
  flex: 1;
  margin-right: 15px;
}

.ranking-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-meta {
  font-size: 12px;
  color: #909399;
  display: flex;
  gap: 15px;
}

.ranking-type {
  flex-shrink: 0;
}
</style>